<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">

                <el-form-item label="省份" prop="province">
                    <el-select v-model="filters.province" filterable :filter-method="selectfilter" placeholder="请选择省份">
                        <el-option value="0" label="全部">全部</el-option>
                        <el-option
                                v-for="item in info"
                                :key="item.provincename"
                                :label="item.provincename"
                                :value="item.provincename">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="地市" prop="province">
                    <el-select v-model="filters.city"  filterable  placeholder="请选择地市">
                        <el-option value="0" label="全部">全部</el-option>
                        <el-option
                                v-for="item in citys"
                                :key="item.city"
                                :label="item.city"
                                :value="item.city">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="filters.mobileOrdersId" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="流水号">
                    <el-input v-model="filters.serialNo" placeholder="流水号"></el-input>
                </el-form-item>
                <el-form-item label="充值号码">
                    <el-input v-model="filters.phoneNo" placeholder="充值号码"></el-input>
                </el-form-item>

                <el-form-item label="订单金额">
                    <el-input v-model="filters.chargeMoney" placeholder="订单金额"></el-input>
                </el-form-item>

                <el-form-item label="订单状态" prop="orderStatus">
                    <!--订单状态 1 未支付  0 等待支付 2 支付成功 3 支付失败 4 充值成功 5 充值失败-->
                    <el-select v-model="filters.orderStatus" filterable placeholder="订单状态">
                        <el-option value="-1" label="全部">全部</el-option>
                        <el-option value="0" label="充值中">充值中</el-option>
                        <el-option value="1" label="未支付">未支付</el-option>
                        <el-option value="2" label="支付成功">支付成功</el-option>
                        <el-option value="3" label="支付失败">支付失败</el-option>
                        <el-option value="4" label="充值成功">充值成功</el-option>
                        <el-option value="5" label="充值失败">充值失败</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否匹配" prop="noticeStatus">
                    <el-select v-model="filters.matching" filterable placeholder="是否匹配">
                        <el-option value="-1" label="全部">全部</el-option>
                        <el-option value="1" label="是">是</el-option>
                        <el-option value="0" label="否">否</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否通知" prop="noticeStatus">
                    <el-select v-model="filters.noticeStatus" filterable placeholder="是否通知">
                        <el-option value="-1" label="全部">全部</el-option>
                        <el-option value="1" label="通知">通知</el-option>
                        <el-option value="0" label="未通知">未通知</el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="开始时间">
                    <el-date-picker type="datetime" placeholder="开始时间"  format="yyyy-MM-dd HH:mm:ss"   v-model="filters.startTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker type="datetime" placeholder="结束时间"  format="yyyy-MM-dd HH:mm:ss"   v-model="filters.endTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="pageOrders">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success">题分:{{blanace}}</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <template>
            <el-table :data="orders" highlight-current-row v-loading="loading" max-height="620" @selection-change="selsChange" border  style="width: 100%;">
                <el-table-column  type="selection"  width="50" label="编号">
                </el-table-column>
                <el-table-column prop="numberPool.mobilePhone" label="充值手机号" width="130px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="orderId" label="订单号" width="130px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="serialNo" show-overflow-tooltip width="130px" label="流水号" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="province" label="省份"  show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="city" label="地市" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="phoneNo" label="充值号码"  width="130px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="chargeMoney" label="订单金额"  width="110px"  show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="amount" label="支付金额"  width="110px" show-overflow-tooltip   >
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态"  width="110px" show-overflow-tooltip   :formatter="formatorderStatus" >
                    <template slot-scope="scope">
                        <!--订单状态 1 未支付  0 等待支付 2支付成功 3支付失败 4充值成功 5充值失败-->
                        <el-tag :type="scope.row.orderStatus == 4 ? 'success' : ( scope.row.orderStatus == 5 ||  scope.row.orderStatus == 3) ?  'danger' : 'info'"   >{{scope.row.orderStatus === 4 ? '充值成功': scope.row.orderStatus === 1 ? '未支付' : scope.row.orderStatus === 0 ? '充值中' : scope.row.orderStatus === 5 ? '充值失败' : scope.row.orderStatus === 2 ? '支付成功' : '未知' }} </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="matching" label="是否匹配" show-overflow-tooltip  width="110px"   :formatter="formatnoticeStatus"  >
                </el-table-column>
                <el-table-column prop="callResult" label="是否通知" show-overflow-tooltip  width="110px"   :formatter="formatcallResult"  >
                </el-table-column>

                <el-table-column prop="bizpayurl" label="支付地址" show-overflow-tooltip  width="110px"   >
                </el-table-column>

                <el-table-column prop="payUrl" label="下单页面" show-overflow-tooltip  width="170px"   >
                    <template slot-scope="scope">
                        <a   :href="scope.row.payUrl" target="_blank" type="success">{{scope.row.payUrl}}</a>
                    </template>
                </el-table-column>

                <el-table-column prop="payUrl" label="凭证页面" show-overflow-tooltip  width="170px"   >
                    <template slot-scope="scope">
                        <a   :href="scope.row.paySuccess" target="_blank" type="success">{{scope.row.paySuccess}}</a>
                    </template>
                </el-table-column>

                <el-table-column prop="systemTime" label="创建时间"   width="170px" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="payTime" label="充值时间"   width="170px" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="endTime" label="完成时间"   width="170px" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="payWay" label="付款方式"  width="110px" show-overflow-tooltip   >
                </el-table-column>
                <el-table-column prop="bankAbbr" label="支付银行"    width="110px" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="remark" label="备注"   width="170px" show-overflow-tooltip >
                </el-table-column>

                <el-table-column label="操作"  fixed="right"   width="500">
                    <template scope="scope"   >
                        <el-button size="small"   @click="searchSlowOrder(scope.$index, scope.row)">
                            订单查询
                        </el-button>
                        <el-button size="small"   @click="successSlowOrder(scope.$index, scope.row)">
                            成功订单
                        </el-button>
                        <el-button size="small"   @click="failtSlowOrder(scope.$index, scope.row)">
                            失败订单
                        </el-button>
                        <el-button size="small"   @click="orderdetail(scope.$index, scope.row)">
                           详情
                        </el-button>

                        <el-button size="small"   @click="updateOrder(scope.$index, scope.row)">
                            更新订单
                        </el-button>
                        <el-button size="small"   @click="pushgame(scope.$index, scope.row)">
                            推送结果
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total,sizes,prev, pager, next"
                :total="total">
        </el-pagination>

    </section>

</template>
<script>
    import { pageOrders ,findAllPro,findProvinceCity,searchSlowOrder,failtSlowOrder,successSlowOrder,orderdetail,updateOrder,pushgame,getScore} from '../../api/api';
    //import NProgress from 'nprogress'
    import moment from 'moment';
    var crypto = require('crypto');
    export default {
        data() {
            return {
                filters: {
                    startTime:  moment(new Date(),"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD') + " 00:00:00",
                    endTime:'',
                    province:'',
                    city:'',
                    serialNo:'',
                    phoneNo:'',
                    mobileOrdersId:'',
                    chargeMoney:'',
                    orderStatus:'-1',
                    noticeStatus:'-1',
                    matching:'-1'
                },
                fileList: [],
                isShowSupper:JSON.parse(sessionStorage.getItem("user")).usertype === 2 ? true : false,
                start:0,
                pageSize:10,
                total:0,
                loading: false,
                info:[],
                citys:[],
                orders:[],
                sels:[],
                importFormVisible: false,
                importFormLoading: false,
                importFormRules: {
                },
                importForm: {

                },
                blanace:0
            }
        },
        methods: {
            formatorderStatus: function (row, column) {
//                    <el-option value="0" label="等待支付">等待支付</el-option>
//                    <el-option value="1" label="未支付">未支付</el-option>
//                    <el-option value="2" label="支付成功">支付成功</el-option>
//                    <el-option value="3" label="支付失败">支付失败</el-option>
//                    <el-option value="4" label="充值成功">充值成功</el-option>
//                    <el-option value="5" label="充值失败">充值失败</el-option>
                return row.orderStatus == 1 ? '未支付' : row.orderStatus == 2 ? ' 支付成功 ' :  row.orderStatus == 3 ? '支付失败' : row.orderStatus == 5 ? '充值失败'
                    : row.orderStatus == 4 ? '充值成功 ' :  row.orderStatus == 0 ? '充值中 '  : "未知";
            },

            formatnoticeStatus:function (row, co) {
                return row.matching == 1 ? '匹配成功' :  row.matching == 0 ? '未匹配' : '未知';
            },
            formatcallResult:function (row, co) {
                //充值结果通知到游戏公司 1 已经通知 0未通知 默认为0
                return row.callResult == 1 ? '已经通知' :  row.callResult == 0 ? '未通知' : '未知';
            },
            handleAdd:function(){
                this.addFormVisible = true;
            },
            pageOrders: function () {
                let para = {
                    start:this.start,
                    pageSize:this.pageSize,
                    startTime: this.filters.startTime  ?   moment(this.filters.startTime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss') : '' ,
                    endTime: this.filters.endTime == '' ? '' : moment(this.filters.endTime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
                    province: this.filters.province ==  "0" ? "" : this.filters.province  ,
                    city : this.filters.city ==  "0" ? "" : this.filters.city   ,
                    serialNo : this.filters.serialNo,
                    mobileOrdersId : this.filters.mobileOrdersId,
                    orderId : '',
                    phoneNo: this.filters.phoneNo,
                    chargeMoney: this.filters.chargeMoney,
                    orderStatus: this.filters.orderStatus == '-1' ? '' : this.filters.orderStatus,
                    noticeStatus: this.filters.noticeStatus == '-1' ? '' : this.filters.noticeStatus,
                    matching: this.filters.matching == '-1' ? '' : this.filters.matching
                };
                pageOrders(para).then(datas => {
                    this.loading = false;
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.orders = data.result;
                        this.total = data.totalCount;
                    }
                }).catch(e =>{

                });
            },handleCurrentChange:function(val){
                this.start = val - 1;
                this.pageOrders();
            },
            handleSizeChange:function(val){
                this.pageSize = val;
                this.pageOrders();
            } ,selsChange: function (sels) {
                this.sels = sels;
            }  ,
            findAllPro:function(){
                let para = {useruuid: ''};
                findAllPro(para).then(datas => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.info = data;
                    }
                });
            },
            selectfilter:function(row){
                if(row != ""){
                    this.findProvinceCity(row)
                }
            },findProvinceCity:function (province) {
                let para = {
                    province : province
                };
                findProvinceCity(para).then((datas) => {
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    }
                    this.citys = data;
                });
            },searchSlowOrder:function (index, row){
                let para = {
                    mobileOrdersId: row.mobileOrdersId
                };
                searchSlowOrder(para).then((datas) => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: data,
                            type: 'error'
                        });
                    }
                    console.log(data)
                    this.$message({
                        message: data,
                        type: 'info'
                    });
                });
            },successSlowOrder(index, row){
                this.$confirm('确认成功订单吗？订单电话号码:'+row.phoneNo, '提示', {}).then(() => {
                    let para = {
                        mobileOrdersId: row.mobileOrdersId
                    };
                    successSlowOrder(para).then((datas) => {
                        this.listLoading = false;
                        let {message, code, data} = datas;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }
                        this.$message({
                            message: message,
                            type: 'info'
                        });
                        this.pageOrders();
                    });
                });
            },failtSlowOrder(index, row){
                this.$confirm('确认失败订单吗？订单电话号码:'+row.phoneNo, '提示', {}).then(() => {
                    let para = {
                        mobileOrdersId: row.mobileOrdersId
                    };
                    failtSlowOrder(para).then((datas) => {
                        this.listLoading = false;
                        let {message, code, data} = datas;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }
                        this.$message({
                            message: message,
                            type: 'info'
                        });
                        this.pageOrders();
                    });
                });
            },orderdetail(index, row){
                let para = {
                    mobileOrdersId: row.mobileOrdersId
                };
                orderdetail(para).then((datas) => {
                    this.listLoading = false;
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    }
                    if(data.orderStatus == 4){
                        this.$message({
                            message: "充值成功",
                            type: 'info'
                        });
                    }

                });
            },updateOrder(index, row){
                let para = {
                    mobileOrdersId: row.mobileOrdersId
                };
                updateOrder(para).then((datas) => {
                    this.listLoading = false;
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    }else
                    this.$message({
                        message: message,
                        type: 'info'
                    });

                    this.pageOrders();
                });
            },pushgame(index, row){
                this.$confirm('确认推送订单吗？', '提示', {}).then(() => {
                    let para = {
                        mobileOrdersId: row.mobileOrdersId
                    };
                    pushgame(para).then((datas) => {
                        this.listLoading = false;
                        let {message, code, data} = datas;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }
                        this.$message({
                            message: message,
                            type: 'info'
                        });
                    });
                });
            },getScore(){
                getScore().then(datas =>{
                    let {message, code, data} = datas;
                    try{
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }else{
                            this.blanace = JSON.parse(data).tifen;
                        }
                    }catch (e){
                        console.log(e)
                    }
                });
            }
        },

        mounted() {
            this.findAllPro();
            this.pageOrders();
            this.getScore();
        },
        beforeCreate: function (){
//            window.location.reload();
        }
    };

</script>

<style scoped>

</style>
